<template>
	<view class="banner" :style="{height: height + 'rpx'}">
		<view v-for="(item, index) in list" :key="index" class="pic"
			  :animation="num === index ?showpic:hidepic"
              :style="{zIndex: zIndex === index ?1:0}"
			  @touchstart="touchstart" @touchend="touchend">
            <!--#ifdef MP -->
            <app-jump-button
                :open_type="item.open_type"
                :url="item.url ? item.url : item.page_url"
                :params="item.params">
                <image :style="{height: height + 'rpx', width: '100%'}" :mode="imgMode"  :src="item[name]" />
            </app-jump-button>
            <!--#endif-->
            <!--#ifdef H5 -->
            <app-jump-button
                v-if="item.open_type !== 'app'"
                :open_type="item.open_type"
                :url="item.url ? item.url : item.page_url"
                :params="item.params">
                <image :style="{height: height + 'rpx', width: '100%'}" :mode="imgMode"  :src="item[name]" />
            </app-jump-button>
            <view :id="item.id" v-if="item.open_type === 'app'" style="height: 100%;">

            </view>
<!--            <view :id="'swiper-' + index" style="height: 100%;">-->

<!--            </view>-->
<!--            <wx-open-launch-weapp v-if="item.open_type === 'app' && isWechat" id="launch-btn" :username="getUrlParam(item.page_url, 'username')" :path="getUrlParam(item.page_url, 'path')">-->
<!--                <script type="text/wxtag-template">-->
<!--                    <image :style="{height: height + 'rpx', width: '100%'}" :mode="imgMode"  :src="item[name]" />-->
<!--                </script>-->
<!--            </wx-open-launch-weapp>-->
            <!--#endif-->
		</view>
		<view class="u-swiper-indicator"
			  :style="{
				bottom: '12rpx',
				justifyContent: 'center'
			}"
		>
			<block v-if="mode === 'rect'">
				<view class="u-indicator-item-rect" :class="{ 'u-indicator-item-rect-active': index === num }" v-for="(item, index) in list"
					  :key="index"></view>
			</block>
			<block v-if="mode === 'round'">
				<view class="u-indicator-item-round" :class="{ 'u-indicator-item-round-active': index === num }" v-for="(item, index) in list"
					  :key="index"></view>
			</block>
		</view>
	</view>
</template>

<script>
	
    export default {
        name:'u-swiper',
        props: {
			list: {
				type: Array,
				default () {
					return [];
				}
			},
			// 图片的裁剪模式
			imgMode: {
				type: String,
				default: 'aspectFill'
			},
			// 从list数组中读取的图片的属性名
			name: {
				type: String,
				default: 'image'
			},
			// list的高度，单位rpx
			height: {
				type: [Number, String],
				default: 250
			},
			// 自动轮播时间间隔，单位ms
			duration: {
				type: [Number, String],
				default: 500
			},
			// 隔多久自动切换
			interval: {
				type: [String, Number],
				default: 3000
			},
			// 指示器的模式，rect|dot|number|round
			mode: {
				type: String,
				default: 'round'
			},
			// 指示器的位置，topLeft|topCenter|topRight|bottomLeft|bottomCenter|bottomRight
			indicatorPos: {
				type: String,
				default: 'bottomCenter'
			},
			// 是否自动播放
			autoplay: {
				type: Boolean,
				default: true
			},
        },
        data() {
            return {
				num: 0,
                zIndex: 0,
				showpic:null,
				hidepic:null,
				setTime: 0,
				touchDot: 0
			}
        },
        // #ifdef H5
        created() {
            this.$jwx.config();
        },
        // #endif
        methods: {
			touchstart(e) {
				this.touchDot = e.touches[0].pageX;
			},

			touchend(e) {
				let touchMove = e.changedTouches[0].pageX;
				if (touchMove - this.touchDot <= -40) {
					this.num = this.num - 1;
					if(this.num < 0){
						this.num=this.list.length-1;
					}
                    setTimeout(() => {
                        this.zIndex = this.num;
                    }, 1000);
				}
				if (touchMove - this.touchDot >= 40) {
					this.num = this.num + 1;
					if(this.num>=this.list.length){
						this.num=0;
					}
                    setTimeout(() => {
                        this.zIndex = this.num;

                    }, 1000);
				}
			},
            getUrlParam(url,name) {
                let search = url.split('?')[1];
                if (search) {
                    let r = search.substr(0).match(new RegExp('(^|&)' + name + '=([^&]*)(&|$)'))
                    if (r !== null) return unescape(r[2])
                    return null
                } else {
                    return null
                }
            }
        },
		destroyed() {
        	clearInterval(this.setTime);
		},
        watch: {
            list: {
                handler(newVal) {
                    if (newVal.length === 0) return;
                    let animation= uni.createAnimation({}) //创建一个动画实例
                    //淡入
                    animation.opacity(1).step({
                        duration:this.duration
                    }) //描述动画
                    this.showpic = animation.export();
                    //淡出
                    animation.opacity(0).step({duration:this.duration});
                    // #ifdef H5
                    // #endif
                    this.hidepic = animation.export();
                    if (this.autoplay) {
                        this.setTime = setInterval(() => {
                            this.num = this.num+1;
                            if(this.num>=this.list.length){
                                this.num=0;
                            }
                           setTimeout(() => {
                               this.zIndex = this.num;
                           }, this.interval + 1000)
                        }, this.interval);
                    }
                    // #ifdef H5
                    for (let i = 0; i < newVal.length; i++) {
                        if (newVal[i].open_type === 'app') {
                            newVal[i].id = this.$utils.guid('swiper');
                            let height = uni.upx2px(this.height)+ 'px';
                            let username = this.getUrlParam(newVal[i].page_url, 'username');
                            let path = this.getUrlParam(newVal[i].page_url, 'path');
                            let text = `<img src="${newVal[i].pic_url}" width="100%" height="${height}" />`;
                            this.$utils.createWxOpenLaunchWeapp(newVal[i].id, username, path, text);
                        }
                    }
                    // #endif
                },
                immediate: true
            }
        },
        // #ifdef H5
        computed: {
            isWechat: function() {
                return this.$jwx.isWechat();
            }
        }
        // #endif
	}
</script>

<style lang="scss" scoped>
	
	page{
		background: #EFEFF4;
	}
	
	#apps{
		display: flex;
		flex-direction: column;
		
		
		// header
		.header{
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #fff;
			height: 88rpx;
			line-height: 88rpx;
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			margin: auto;
			padding: 0 32rpx;
			box-sizing: border-box;
			z-index: 1000;
			.so{
				position: relative;
				flex: 1;
				margin-right: 20rpx;
				input{
					background: rgba(219, 219, 219, 0.37);
					height: 62rpx;
					line-height: 62rpx;
					border-radius: 10rpx;
					padding: 0 32rpx 0 60rpx;
					box-sizing: border-box;
					.placeholder{
						font-size: 24rpx;
						color: #999;
					}
				}
				image{
					width: 36rpx;
					height: 36rpx;
					position: absolute;
					left: 16rpx;
					top: 0;
					bottom: 0;
					margin: auto;
				}
			}
			.sao{
				display: flex;
				align-items: center;
				image{
					width: 44rpx;
					height: auto;
					margin-left: 20rpx;
				}
			}
		}
		
		
		
		// tab_box
		.tab_box{
			display: flex;
			justify-content: space-between;
			height: 88rx;
			line-height: 88rpx;
			overflow: hidden;
			position: fixed;
			top: 88rpx;
			left: 0;
			right: 0;
			margin: auto;
			background: #fff;
			padding: 0 32rpx;
			box-sizing: border-box;
			z-index: 1000;
			.scrollview{
				::-webkit-scrollbar{width:0px; height:0px;}
				white-space: nowrap;
				view{
					display: inline-block;
					font-size: 32rpx;
					font-weight: bold;
					margin-right: 54rpx;
					color: #666;
					&:last-of-type{
						padding-right: 32rpx;
					}
					&.active{
						color: #333;
						font-size: 36rpx;
						position: relative;
						&::after{
							content: '';
							background:$index_color;
							width: 80%;
							height: 8rpx;
							display: inline-block;
							position: absolute;
							left: 0;
							right: 0;
							bottom: 0;
							margin: auto;
							z-index: -1;
							border-radius: 100px;
						}
					}
				}
			}
			.navs{
				position: absolute;
				top: 0;
				bottom: 0;
				right: 0;
				margin: auto;
				background: #fff;
				box-shadow: 1px 1px 20px #ddd;
				width: 90rpx;
				height: auto;
				text-align: center;
				image{
					width: 44rpx;
					height: auto;
				}
			}
		}
		
		
		
		
		// swiper
		.swiper{
			display: block;
			padding: 24rpx;
			box-sizing: border-box;
			margin-top: 176rpx;
			
			image{
				width: 100%;
				height: auto;
				box-shadow: 0px 4rpx 12rpx rgba(0, 0, 0, 0.1);
				border-radius: 18rpx;
				overflow: hidden;
			}
		}

		
		
		
		// icon_list
		.icon_list{
			margin-top: 10rpx;
			display: grid;
			grid-template-columns: repeat(5,1fr);
			image{
				width: 54rpx;
				height: auto;
				display: block;
				margin: auto;
			}
			text{
				font-size: 28rpx;
				color: #333;
				display: block;
				text-align: center;
				margin: 10rpx 0;
			}
		}
		
		
		
		
		
		
		// hot_box
		.hot_box{
			padding: 20rpx 24rpx;
			display: grid;
			grid-template-columns: repeat(2,1fr);
			gap: 20rpx;
			box-sizing: border-box;
			align-items: center;
			justify-content: space-between;
			.hot_item{
				background: #fff;
				border-radius: 20rpx;
				padding: 20rpx;
				box-sizing: border-box;
				.title{
					display: flex;
					align-items: center;
					.t{
						font-size: 36rpx;
						color: #333;
						font-weight: bold;
					}
					.s{
						display: flex;
						margin-left: 20rpx;
						align-items: center;
						padding: 4rpx 10rpx;
						image{
							width: 24rpx;
							height: auto;
						}
						text{
							font-size: 22rpx;
							color: #fff;
							margin-left: 10rpx;
						}
						background: $index_color;
						border-radius: 100px;
					}
				}
				.list{
					display: grid;
					grid-template-columns: repeat(2,1fr);
					gap: 20rpx;
					align-items: center;
					justify-content: space-between;
					margin: 20rpx 0 0 0;
					image{
						width: 100%;
						height: auto;
						border-radius: 10rpx;
					}
				}
			}
		}
		
		
		
		
		
		// 秒杀单品
		.msdp_box{
			display: block;
			padding:16rpx 24rpx;
			box-sizing: border-box;
			.title{
				display: flex;
				align-items: center;
				.t{
					font-weight: bold;
					font-weight: 36rpx;
					color: #333;
				}
				.time_box{
					display: flex;
					align-items: center;
					border: 1px $index_color solid;
					border-radius: 100px;
					height: 36rpx;
					line-height: 36rpx;
					overflow: hidden;
					margin-left: 20rpx;
					.s{
						background: linear-gradient(177deg, #FFE0DE 0%, #F2675B 33%, #DE4335 100%);
						color: #fff;
						font-size: 24rpx;
						padding: 0 20rpx;
						box-sizing: border-box;
						border-radius: 100px 0 0 100px;
						display: flex;
						align-items: center;
						image{
							width: 16rpx;
							height: auto;
							margin-right: 10rrpx;
							display: block;
						}
						text{
							margin-left: 5rpx;
						}
					}
					.time{
						font-size: 24rpx;
						color: $index_color;
						padding: 0 20rpx;
						box-sizing: border-box;
					}
				}
				.more{
					margin-left: auto;
					font-size: 24rpx;
					color: #999;
					image{
						width: 12rpx;
						height: auto;
						margin-left: 8rpx;
					}
				}
			}
			
			.list{
				background: #fff;
				box-shadow: 0px 6rpx 8rpx rgba(93, 93, 93, 0.05);
				box-sizing: border-box;
				border-radius: 20rpx;
				margin: 20rpx 0;
				display: grid;
				padding: 20rpx;
				gap: 20rpx;
				grid-template-columns: repeat(3,1fr);
				.item{
					width: 100%;
					image{
						width: 100%;
						height: auto;
						display: block;
						margin: auto;
						border-radius: 10rpx;
						box-shadow: 0px 4rpx 4rpx rgba(0, 0, 0, 0.05);
					}
					.price{
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 10rpx;
						box-sizing: border-box;
						text{
							&::before{
								content: '￥';
							}
						}
						.new{
							font-size: 28rpx;
							color: #333;
							font-weight: bold;
						}
						.old{
							font-size: 22rpx;
							color: #999;
							text-decoration: line-through;
						}
					}
				}
			}
		}
		
		
		
		
		
		// 最新上架
		.new_pro{
			padding: 0 24rpx;
			box-sizing: border-box;
			.title{
				display: flex;
				align-items: center;
				.t{
					font-weight: bold;
					font-weight: 36rpx;
					color: #333;
				}
				.s{
					background: linear-gradient(177deg, #DEF0FF 0%, #F25B5B 33%, #DE3535 100%);
					color: #fff;
					font-size: 24rpx;
					padding: 0 16rpx;
					box-sizing: border-box;
					border-radius:8rpx;
					display: flex;
					align-items: center;
					margin-left: 10rpx;
					image{
						width: 24rpx;
						height: auto;
						margin-right: 10rrpx;
						display: block;
					}
					text{
						margin-left: 5rpx;
					}
				}
				.more{
					margin-left: auto;
					font-size: 24rpx;
					color: #999;
					image{
						width: 12rpx;
						height: auto;
						margin-left: 8rpx;
					}
				}
			}
			
			.new_prolist{
				white-space: nowrap;
				padding: 20rpx 0;
				::-webkit-scrollbar{width:0px; height:0px;}
				.item{
					display: inline-block;
					margin-right: 20rpx;
					&:last-of-type{
						margin-right: 0;
					}
					image{
						width: 148rpx;
						height: auto;
						border-radius: 10rpx;
						display: block;
						margin: auto;
					}
					.t{
						font-size: 22rpx;
						color: #333;
						font-weight: bold;
						display: block;
						text-align: left;
						margin-top: 10rpx;
					}
					.pirce{
						font-size: 28rpx;
						color: $index_color;
						font-weight: bold;
						display: block;
						text-align: left;
						&::before{
							content: '￥';
						}
					}
				}
			}
		}
		
		
		
		
		// 好物专区
		.good_pro{
			margin:10rpx 24rpx 24rpx;
			box-sizing: border-box;
			background: #fff;
			border-radius: 20rpx;
			padding: 20rpx;
			.title{
				display: flex;
				align-items: center;
				.t{
					font-weight: bold;
					font-weight: 32rpx;
					color: #333;
				}
				.more{
					margin-left: auto;
					font-size: 20rpx;
					color: #fff;
					box-shadow: 0px 6rpx 12rpx rgba(222, 67, 53, 0.47);
					background: $index_color;
					border-radius: 100px;
					height: 34rpx;
					line-height: 34rpx;
					padding: 0 16rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					image{
						width: 12rpx;
						height: auto;
						margin-left: 8rpx;
					}
				}
			}
			
			.list{
				display: grid;
				grid-template-columns: repeat(3,1fr);
				gap: 20rpx;
				.item{
					background: #F5F5F5;
					border-radius: 20rpx;
					box-sizing: border-box;
					margin: 20rpx 0 0 0;
					.img{
						overflow: hidden;
						font-size: 0;
						image{
							width: 100%;
							height: auto;
							border-radius: 10rpx 10rpx  0 0;
							font-size: 0;
						}
					}
					.desc{
						padding: 0 10rpx 10rpx 10rpx;
						box-sizing: border-box;
						overflow: hidden;
						
						.t{
							font-size: 20rpx;
							color: #333;
							font-weight: bold;
						}
						.price{
							font-size: 24rpx;
							color: #FF5130;
							font-weight: bold;
							display: block;
							text-align: left;
							text{
								&::before{
									content: '￥';
								}
							}
							.old{
								font-size: 20rpx;
								color: #999;
								text-decoration: line-through;
								margin-left:10rpx;
								font-weight: normal;
							}
						}
					}
					
				}
			}
		}
		
		
		
		
		
		// 附近门店
		.fjmd_box{
			padding: 0 24rpx;
			box-sizing: border-box;
			
			.title{
				display: flex;
				align-items: center;
				.t{
					font-weight: bold;
					font-weight: 32rpx;
					color: #333;
				}
				.more{
					margin-left: auto;
					font-size: 24rpx;
					color: #999;
					image{
						width: 12rpx;
						height: auto;
						margin-left: 8rpx;
					}
				}
			}
			
			.new_prolist{
				white-space: nowrap;
				margin: 20rpx 0 0 0;
				::-webkit-scrollbar{width:0px; height:0px;}
				.item{
					background: #fff;				
					box-shadow: 0px 6px 8px rgba(93, 93, 93, 0.05);
					border-radius: 20rpx;
					padding: 20rpx;
					box-sizing: border-box;
					display: inline-block;
					margin-right: 20rpx;
					&:last-of-type{
						margin: 0;
					}
					.logo{
						display: flex;
						align-items: center;
						margin-bottom: 20rpx;
						image{
							width: 108rpx;
							height: auto;
							border-radius: 100px;
						}
						.text{
							margin-left: 10rpx;
							.t{
								font-size: 28rpx;
								color: #333;
								font-weight: bold;
							}
							.jl{
								font-size: 22rpx;
								color: #999;
								display: block;
								text-align: center;
							}
						}
						
					}
					
					.imglist{
						display: grid;
						grid-template-columns: repeat(2,1fr);
						gap: 20rpx;
						box-sizing: border-box;
						image{
							width: 126rpx;
							height: auto; 
							border-radius: 10rpx;
							display: block;
							margin: auto;
						}
						text{
							font-size: 26rpx;
							color: #333;
							font-weight: bold;
							&::before{
								content: '￥';
							}
						}
					}
				}
			}
			
		}
		
		
		
		
		
		// 分类
		.class_tab{
			margin: 30rpx 24rpx;
			.scrollview{
				white-space: nowrap;
				::-webkit-scrollbar{width:0px; height:0px;}
				view{
					display: inline-block;
					position: relative;
					margin-right: 30rpx;
					padding-right: 30rpx;
					font-weight: 32rpx;
					color: #999;
					&.active{
						color: #333;
						font-weight: bold;
						&::before{
							content: '';
							position: absolute;
							left: 25%;
							bottom: -15rpx;
							width: 40%;
							height: 8rpx;
							background: $index_color;
							display: inline-block;
							margin: auto;
							border-radius: 100px;
						}
					}
					&::after{
						content: '';
						position: absolute;
						right: 0;
						top: 0;
						bottom: 0;
						margin: auto;
						background: #999;
						height: 28rpx;
						width: 1px;
						display: inline-block;
					}
					&:last-of-type{
						padding: 0;
						margin-right: 0;
						&::after{display: none;}
					}
				}
			}
		}
		
		
		
		
		
		
		
		// .pro_list
		.pro_list{
			display: grid;
			grid-template-columns: repeat(2,1fr);
			gap: 20rpx;
			box-sizing: border-box;
			padding: 0 24rpx 24rpx 24rpx;
			
			
			.item{
				background: #fff;
				border-radius: 20rpx;
				padding: 20rpx;
				box-sizing: border-box;
				.img{
					width: 100%;
					height: auto;
					image{
						width: 100%;
						height: auto;
					}
				}
				.desc{
					.t{
						font-size: 32rpx;
						color: #333;
						font-weight: bold;
					}
					.footer{
						display: flex;
						align-items: center;
						justify-content: space-between;
						.pirce{
							font-size: 32rpx;
							color: #333;
							font-weight: bold;
							&::before{
								content: '￥';
							}
						}
						.fk{
							font-size: 24rpx;
							color: #999;
							text:first-of-type{
								color: $index_color;
							}
						}
					}
				}
			}
			
		}
		
		
		
		// 加载
		.loading{
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 20rpx 0 40rpx 0;
			box-sizing: border-box;
			.icon{
				width: 16rpx;
				height: 16rpx;
				display: inline-block;
				border-radius: 100px;
				margin: 0 5rpx;
				background: linear-gradient(170deg, #E2453B 0%, #FFA09B 100%);
			}
			.icon1{
				animation: my1 1s infinite;
				animation-delay:1s;
			}
			.icon2{
				animation: my2 1s infinite;
				animation-delay:1s;
			}
			.icon3{
				animation: my3 1s infinite;
				animation-delay:1s;
			}
			
			@keyframes my1{
				
				33%{
					width: 20rpx;
					height: 20rpx;
					background: #333;
				}
			}
			@keyframes my2{
				66%{
					width: 20rpx;
					height: 20rpx;
					background: #333;
				}
			}
			@keyframes my3{
				99%{
					width: 20rpx;
					height: 20rpx;
					background: #333;
				}
			}
			
			.t{
				font-size: 28rpx;
				color: #999;
				margin-right: 10rpx;
			}
		}
		
		
	}
	
</style>
